<template>
  <TopNav />
  <!-- 输入框 -->
  <van-search v-model="keyword" placeholder="陈奕迅" @search="submit" />

  <!-- 历史搜索 -->
  <div class="searchHistory">
    <span class="searchSpan">历史</span>
    <span
      v-for="item in keyWordList" 
      :key="item"
      class="spanKey"
      @click="handle_History(item)"
    >
      {{ item }}
      <van-icon class="icon" name="close" @click="delete_History(item)" />
    </span>
    <br />
    <van-button
      class="btn"
      round
      type="primary"
      size="small"
      color="rgb(255,165,165)"
      @click="clear_History"
      >清空搜索历史</van-button
    >
  </div>

  <div class="music_List">
    <div class="music_detail" v-for="(song, index) in songs" :key="index">
      <div class="music_List_left" @click="handle_paly_song(song)">
        <span class="songIndex">{{ index + 1 }}</span>
        <div class="music_List_name">
          <span class="songName">{{ song.name }}</span>
          <div class="music_ar">
            <span v-for="(ar, index) in song.artists" :key="index">{{
              ar.name
            }}</span>
          </div>
        </div>
      </div>
      <div class="music_List_right">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-hanbaobao"></use>
        </svg>
      </div>
    </div>
  </div>
</template>

<script>
import TopNav from "@/components/home/TopNav.vue";
import { searchSongs } from "@/request/api/search";
import { mapMutations, mapState } from "vuex";
export default {
  components: { TopNav },
  data() {
    return {
      keyword: "",
      songs: [],
      keyWordList: JSON.parse(localStorage.getItem("KEYWORD_LIST")) || [],
    };
  },
  computed: {
    ...mapState(["playList"]),
  },
  methods: {
    ...mapMutations(["updataPlaylist", "updataPlayListIndex", "pushPlayList"]),
    //搜索请求函数
    async getSongs(value) {
      const res = await searchSongs(value);
      this.songs = res.data.result.songs;
      console.log(this.songs);
    },

    // 回车提交搜索关键字
    submit() {
      if (!this.keyword.trim()) return alert("输入不能为空!!!");
      this.keyWordList.unshift(this.keyword); 
      localStorage.setItem("KEYWORD_LIST", JSON.stringify(this.keyWordList));
      // 去重
      this.keyWordList = [...new Set(this.keyWordList)];
      // keyWordList的长度必须在10以内，超出的把第11个删除
      if (this.keyWordList > 10) {
        this.keyWordList.splice(this.keyWordList.length - 1, 1);
      }
      this.getSongs(this.keyword);
      return (this.keyword = "");
    },
    // 点击历史记录中的keyword
    handle_History(value) {
      this.getSongs(value);
    },
    // 点击x删除历史记录的某个keyword
    delete_History(item) {
      this.keyWordList = this.keyWordList.filter((element) => {
        return element != item;
      });
      localStorage.setItem("KEYWORD_LIST", JSON.stringify(this.keyWordList));
    },
    // 清空历史记录
    clear_History() {
      localStorage.removeItem("KEYWORD_LIST");
      this.keyWordList = [];
    },
    // 点击搜索结果的音乐并播放
    handle_paly_song(item) {
      item.al = item.album;
      item.al.picUrl = item.album.artist.img1v1Url;
      this.pushPlayList(item);
      this.updataPlayListIndex(this.playList.length - 1);

      // this.updataPlaylist(this.songs)
      // this.updataPlayListIndex(index)
    },
  },
};
</script>

<style lang="less" scoped>
.search_history {
  width: 100%;
  height: 200px;
}

.music_List {
  width: 100%;

  .music_detail {
    // width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;

    .music_List_left {
      display: flex;
      .songIndex {
        align-self: center;
        padding: 5px;
      }
      .music_List_name {
        display: flex;
        flex-direction: column;
        .songName {
          font-weight: 600;
        }
        .music_ar {
          display: flex;
          span {
            margin-right: 5px;
          }
        }
      }
    }
  }
}

// 历史搜索内容
.search_history {
  width: 100%;
  height: 30px;
  background-color: red;
  display: flex;
}

.searchHistory {
  width: 100%;
  padding: 0.2rem;
  position: relative;
  .searchSpan {
    font-weight: 700;
  }
  .spanKey {
    padding: 0.1rem 0.2rem;
    background-color: rgb(185, 169, 169);
    border-radius: 0.4rem;
    margin: 5px 10px;
    display: inline-block;
  }
  .icon {
    width: 15px;
    height: 15px;
  }
  .btn {
    height: 40px;
  }
}
</style>